<!--公众号配置-->
<template>
  <div id="wechatConfig" v-loading="loading" :element-loading-text="loadingText" class="app-container">
    <div class="common-title m-b-20 p-l-10"><h2 class="bold">微信公众号服务配置</h2></div>
    <el-form :model="listQuery" :inline="true" class="p-l-10">
      <el-form-item>
        <application-key-select ref="applicationKeySelect" v-model="listQuery.appId" :type="listQuery.type" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-plus" plain @click="handleCreate">新增</el-button>
        <el-button type="danger" icon="el-icon-delete" plain @click="handleRemove">删除</el-button>
      </el-form-item>
    </el-form>
    <div class="container">
      <el-form
        ref="form"
        :model="wechatConfigRecords"
        :rules="rules"
        label-width="200px"
        class="common-form-with-desc">
        <template>
          <el-alert
            v-if="wechatConfigRecords.id"
            style="margin-bottom: 20px;"
            title="相关配置："
            type="warning"
            :closable="false">
            <template>
              <span>
                <label>AppId：</label>
                <copy-text :content="wechatConfigRecords.appId" position="left" />
                <br>
                <label>AppSecret：</label>
                <copy-text :content="wechatConfigRecords.appSecret" position="left" />
                <br>
                <label>令牌(Token)：</label>
                <copy-text :content="wechatConfigRecords.serverToken" position="left" />
                <br>
                <label>EncodingAESKey：</label>
                <copy-text :content="wechatConfigRecords.value1" position="left" />
                <br>
                <label>服务器地址(URL)：</label>
                <copy-text :content="wechatConfigRecords.serverUrl+'/'+wechatConfigRecords.appId" position="left" />
                <el-link
                  type="primary"
                  :underline="false"
                  style="margin-left:10px"
                  @click="handleVerification(wechatConfigRecords.serverUrl+'/'+wechatConfigRecords.appId)">验证</el-link>
                <br>
                <label>网页授权：</label>
                <copy-text :content="wechatConfigRecords.authorizeUrl" position="left" />
                post接口请求{appId:{{ wechatConfigRecords.appId }},oauthChannel:'OAUTH_CHANNEL_WX_PUB',callback:'*********'}
                <br>
                <label>网页授权成功回调：</label>
                <copy-text :content="wechatConfigRecords.redirectUrl+'/'+wechatConfigRecords.appId" position="left" />
                <br>
                <label>微信公众号平台：</label>
                <a class="color-primary" href="https://mp.weixin.qq.com/" target="_blank" style="margin-right:20px">正式号(链接)</a>
                <a class="color-primary" href="https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index" target="_blank">测试号(链接)</a>

              </span>
            </template>
          </el-alert>
        </template>
        <el-form-item label="名称:" prop="name">
          <el-input v-model="wechatConfigRecords.name" placeholder="请输入微信公众号名称" />
        </el-form-item>
        <el-form-item label="AppId:" prop="appId">
          <el-input v-model="wechatConfigRecords.appId" placeholder="请输入微信公众号AppId" />
        </el-form-item>
        <el-form-item label="AppSecret:" prop="appSecret">
          <el-input v-model="wechatConfigRecords.appSecret" placeholder="请输入微信公众号AppSecret" />
        </el-form-item>
        <el-form-item label="Token:" prop="serverToken">
          <el-input v-model="wechatConfigRecords.serverToken" disabled />
        </el-form-item>
        <el-form-item label="EncodingAESKey:" prop="value1">
          <el-input v-model="wechatConfigRecords.value1" disabled />
        </el-form-item>
        <el-form-item label="描述:" prop="remark">
          <el-input v-model="wechatConfigRecords.remark" :rows="4" maxlength="200" show-word-limit type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button :loading="buttonLoading" type="primary" @click="status==='create'?createData():updateData()">配置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import applicationKeySelect from '../applicationKeySelect'
export default {
  components: { applicationKeySelect },
  data() {
    return {
      typeEnum: 'APPLICATION_TYPE_WX_PUB',
      listQuery: {
        appId: '',
        type: 1
      },
      loading: false,
      loadingText: '',
      buttonLoading: false,
      status: 'create',

      wechatConfigRecords: {
        id: '',
        photo: '',
        name: '',
        appId: '',
        appSecret: '',
        serverToken: '',
        remark: '',
        type: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入公众号名称', trigger: 'blur' }
        ],
        appId: [
          { required: true, message: '请输入公众号APP_ID', trigger: 'blur' }
        ],
        appSecret: [
          { required: true, message: '请输入公众号密钥', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择微信类型', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    'listQuery.appId': function(val) {
      this.getWechatConfig()
    }
  },
  created() {

  },
  methods: {

    async getWechatConfig() {
      const response = await this.$store.dispatch('applicationKeyConfigGetByAppId', this.listQuery.appId)
      if (response == null) {
        this.$modal.msgWarning('请先配置相关信息！')
        this.status = 'create'
        this.wechatConfigRecords = {
          serverToken: this.T.randomString(4)
        }
        return
      }
      this.status = 'update'
      this.wechatConfigRecords = response
    },
    handleCreate() {
      this.status = 'create'
      this.wechatConfigRecords = {
        serverToken: this.T.uuid(),
        value1: this.T.randomString(43),
        appId: 'AppId'
      }
    },
    createData() {
      this.buttonLoading = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.wechatConfigRecords.applicationTypeEnum = this.typeEnum
          this.$store.dispatch('applicationKeyConfigSave', this.wechatConfigRecords).then(response => {
            this.buttonLoading = false
            this.$modal.msgSuccess('配置成功')
            this.$refs.applicationKeySelect.refresh()
            this.listQuery = {
              ...this.listQuery,
              appId: response.appId
            }
            this.getWechatConfig()
          }).catch(() => {
            this.buttonLoading = false
          })
        }
      })
    },
    updateData() {
      this.buttonLoading = true
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.wechatConfigRecords.applicationTypeEnum = this.typeEnum
          this.$store.dispatch('applicationKeyConfigUpdate', this.wechatConfigRecords).then(response => {
            this.buttonLoading = false
            this.$modal.msgSuccess('配置成功')
            this.$refs.applicationKeySelect.refresh()
          }).catch(() => {
            this.buttonLoading = false
          })
        }
      })
    },
    handleVerification(url) {
      this.loading = true
      this.loadingText = '验证中...'
      axios.get(url).then((res) => {
        this.$modal.msgSuccess('地址正常使用!')
        this.loading = false
      }).catch((_) => {
        this.loading = false
        this.$modal.msgWarning('地址不通!')
      })
    },
    handleRemove() {
      this.$refs.applicationKeySelect.remove()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" >
#wechatConfig {
  background: #fff;
  .container{
    height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 0px 36px 10px 36px;
  }
}
</style>
